<template>
  <div class="header">
    <ul>
        <li v-for="item in compareList" :key="item.title" >
            <img :src="item.src" alt="">
            <span @click="$emit('remove',item.title)">x</span>
        </li>
        <li v-if="compareList.length<3"></li>
    </ul>
    <button :disabled="compareList.length < 2" @click="$emit('compare')">Compare</button>
  </div>
</template>

<script>
export default {    
    props:['compareList']
}
</script>

<style lang="scss" scoped>
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: rgba($color: #000000, $alpha: 0.5);
  display: flex;
  padding: 10px 20px;
  justify-content: flex-end;
  button {
    width: 80px;
  }
}
ul {
  display: flex;
  flex-direction: row-reverse;

  li {
    width: 40px;
    height: 40px;
    background: #ccc;
    margin-right: 15px;
    background: #42444e;
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
    span{
      position: absolute;
      top: -6px;
      right: 0;
      cursor: pointer;
    }
  }
}
</style>